<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
	<title>{{ webconfig.web_site_title }} - CuteOne网盘系统</title>
    <meta name="keywords" content="{{ webconfig.web_site_keyword }}">
    <meta name="description" content="{{ webconfig.web_site_description }}">
	<link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.1/css/mdui.css">
	<link rel="stylesheet" href="{{url_for('static', filename='css/lightbox.css')}}">
	<style>
		body {
			background-image: url("{{webconfig.web_site_background}}") !important;
			background-position: center bottom !important;
			background-size: cover !important;
			background-attachment: fixed !important;
			background-repeat: no-repeat !important;
		}

		.nexmoe-item {
			margin: 20px -8px 0 !important;
			padding: 15px !important;
			border-radius: 5px;
			background-color: #fff;
			-webkit-box-shadow: 0 .5em 3em rgba(161, 177, 204, .4);
			box-shadow: 0 .5em 3em rgba(161, 177, 204, .4);
			background-color: #fff
		}

		.mdui-img-fluid,
		.mdui-video-fluid {
			border-radius: 5px;
			border: 1px solid #eee
		}

		.mdui-list {
			padding: 0
		}

		.mdui-list-item {
			margin: 0 !important;
			border-radius: 5px;
			padding: 0 10px 0 5px !important;
			border: 1px solid #eee;
			margin-bottom: 10px !important
		}

		.mdui-list-item:last-child {
			margin-bottom: 0 !important
		}

		.mdui-list-item:first-child {
			border: none
		}

		.mdui-toolbar {
			width: auto;
			margin-top: 30px !important
		}

		.mdui-appbar .mdui-toolbar {
			height: 56px;
			font-size: 16px
		}

		.mdui-toolbar>* {
			padding: 0 6px;
			margin: 0 2px;
			opacity: .5
		}

		.mdui-toolbar>.mdui-typo-headline {
			padding: 0 16px 0 0
		}

		.mdui-toolbar>i {
			padding: 0
		}

		.mdui-toolbar>a:hover,
		a.mdui-typo-headline,
		a.active {
			opacity: 1
		}

		.mdui-container {
			max-width: 980px
		}

		.mdui-list>.th {
			background-color: initial
		}

		.mdui-list-item>a {
			width: 100%;
			line-height: 48px
		}

		.mdui-toolbar>a {
			padding: 0 16px;
			line-height: 30px;
			border-radius: 30px;
			border: 1px solid #eee
		}

		.mdui-toolbar>a:last-child {
			opacity: 1;
			background-color: #1e89f2;
			color: #ffff
		}
        .mdui-drive {
            overflow: hidden;
        }
        .mdui-drive ul {
            padding: 0;
            margin: 0;
        }
        .mdui-drive li {
            list-style: none;
            float: left;
            margin: 0 10px;
        }
        .mdui-drive li a {
            text-decoration: none;
            padding: 10px;
            color: #272727;
            border-radius: 20px;
        }
        .mdui-drive li a:hover {
            background: #1e89f2;
            color: #fff;
        }

		@media screen and (max-width:980px) {
			.mdui-list-item .mdui-text-right {
				display: none
			}

			.mdui-container {
				width: 100% !important;
				margin: 0
			}

			.mdui-toolbar>* {
				display: none
			}

			.mdui-toolbar>a:last-child,
			.mdui-toolbar>.mdui-typo-headline,
			.mdui-toolbar>i:first-child {
				display: block
			}
		}
        .mdui-container-fluid {
            position: relative;
        }
        .zySearch {
            position: absolute;
            right: 10px;
            top: 6px;
        }
        .zySearch .search-input {
            color: #999;
            border: 1px solid #d0d0d0;
            height: 33px;
            line-height: 33px;
            margin-right: 5px;
            padding: 0 10px;
            width: 200px;
            position: relative;
            z-index: 1;
        }
        .zySearch .search-img {
            background: url("{{url_for('static', filename='images/chicken.gif')}}") no-repeat scroll left top transparent;
            display: block;
            height: 24px;
            left: 39%;
            margin-left: -12px;
            position: absolute;
            top: 10px;
            width: 24px;
            transition: all 400ms;
        }
        .zySearch .search-input:focus + .search-img {
            top: -24px;
        }
        .zySearch .search-btn {
            background: none repeat scroll 0 0 #f04243;
            border: 0;
            border-radius: 0;
            color: #fff;
            cursor: pointer;
            height: 35px;
            line-height: 33px;
            padding: 0;
            vertical-align: baseline!important;
            width: 76px;
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;
            margin-bottom: 0;
            font-weight: 400;
            font-size: 14px;
            display: inline-block;
            position: relative;
        }
        .page-box {
            text-align: center;
        }
        .page-box .allpage {
            display: block;
            line-height: 37px;
            font-style:normal
        }
        .page-box ul {
            overflow: hidden;
            display: inline-block;
        }
        .page-box li {
            list-style: none;
            float: left;
        }
        .page-box span {
            text-decoration: none;
            color: #272727;
            background: none;
            padding: 5px 10px;
            width: 35px;
            height: 35px;
            line-height: 35px;
            margin: 0 5px;
            border: 1px solid #272727;
            cursor: default;
        }
        .page-box li.current span {
            color: #ffffff;
            background: #272727;
            border: 1px solid #272727;
        }
        .page-box li:hover span {
            opacity: .5;
        }
        .page-box li.current:hover span {
            opacity: 1;
        }
        .web_site_copyright {
            text-align: center;
            margin: 30px 0;
        }
        .web_site_copyright span a {
            text-decoration: none;
            color: #448aff;
        }
        .logo {

        }
        .logo img {
            width: 240px;
        }
	</style>
    <!-- 预留空间 给继承的CSS -->
    {% block style %} {% endblock %}
    <script type="application/javascript" src="{{url_for('static', filename='js/jquery.min.js')}}"></script>
    <script type="application/javascript" src="{{url_for('static', filename='js/lightbox.js')}}"></script>
    <script type="application/javascript" src="{{url_for('static', filename='layui/layui.js')}}"></script>
    <script type="application/javascript" src="{{url_for('static', filename='js/clipboard.min.js')}}"></script>
	<script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.1/js/mdui.min.js"></script>
</head>

<body class="mdui-theme-primary-blue-grey mdui-theme-accent-blue">
	<div class="mdui-container">
        <div class="mdui-container-fluid">
            <a href="/" class="logo">
                <img src="{{ webconfig.web_site_logo }}" alt="{{ webconfig.web_site_title }}">
            </a>
        </div>
        <div class="mdui-container-fluid">
			<div class="mdui-drive nexmoe-item">
                <ul>
                    {% for menu in menu_list %}
                        <li>
                            <a href="{{ menu.url }}">
                                {{ menu.title }}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
			</div>
            <div class="zySearch">
                <input id="searchInput" class="search-input" type="text" placeholder="搜索小二丫？">
                <b class="search-img"></b>
                <button class="search-btn btn" onclick="search()">搜索</button>
            </div>
		</div>
		<div class="mdui-container-fluid">
			<div class="mdui-toolbar nexmoe-item">
				<a href="{{crumbs_url}}">CuteOne</a><i class="mdui-icon material-icons mdui-icon-dark" style="margin:0;">chevron_right</i>
                {% for crumbs in crumbs_list_data %}
                    <a href="{{crumbs_url}}path=/{{ crumbs.path }}">{{ crumbs.name }}</a>/
                {% endfor %}
			</div>
		</div>

        <div class="mdui-container-fluid">
            <style>
                .thumb .th{
                    display: none;
                }
                .thumb .mdui-text-right{
                    display: none;
                }
                .thumb .mdui-list-item a ,.thumb .mdui-list-item {
                    width:217px;
                    height: 230px;
                    float: left;
                    margin: 10px 10px !important;
                }

                .thumb .mdui-col-xs-12,.thumb .mdui-col-sm-7{
                    width:100% !important;
                    height:230px;
                }

                .thumb .mdui-list-item .mdui-icon{
                    font-size:100px;
                    display: block;
                    margin-top: 40px;
                    color: #7ab5ef;
                }
                .thumb .mdui-list-item span{
                    float: left;
                    display: block;
                    text-align: center;
                    width:100%;
                    position: absolute;
                    top: 180px;
                }
            </style>
            <div class="nexmoe-item">
                <div class="mdui-row">
                    {% block body %}{% endblock %}
                </div>
            </div>
        </div>

        <div class="web_site_copyright">
            {{ webconfig.web_site_copyright | safe }}
            <span>
                {{ webconfig.web_site_icp | safe }}
            </span>
        </div>

        <a href="javascript:thumb();" class="mdui-fab mdui-fab-fixed mdui-ripple mdui-color-theme-accent"><i class="mdui-icon material-icons">format_list_bulleted</i></a>
	</div>

    <script>
        $.fn.extend({
            sortElements: function (comparator, getSortable) {
                getSortable = getSortable || function () { return this; };

                var placements = this.map(function () {
                    var sortElement = getSortable.call(this),
                        parentNode = sortElement.parentNode,
                        nextSibling = parentNode.insertBefore(
                            document.createTextNode(''),
                            sortElement.nextSibling
                        );

                    return function () {
                        parentNode.insertBefore(this, nextSibling);
                        parentNode.removeChild(nextSibling);
                    };
                });

                return [].sort.call(this, comparator).each(function (i) {
                    placements[i].call(getSortable.call(this));
                });
            }
        });

        function downall() {
             let dl_link_list = Array.from(document.querySelectorAll("li a"))
                 .map(x => x.href) // 所有list中的链接
                 .filter(x => x.slice(-1) != "/"); // 筛选出非文件夹的文件下载链接

             let blob = new Blob([dl_link_list.join("\r\n")], {
                 type: 'text/plain'
             }); // 构造Blog对象
             let a = document.createElement('a'); // 伪造一个a对象
             a.href = window.URL.createObjectURL(blob); // 构造href属性为Blob对象生成的链接
             a.download = "folder_download_link.txt"; // 文件名称，你可以根据你的需要构造
             a.click() // 模拟点击
             a.remove();
        }

        function thumb(){
            if($('.mdui-fab i').text() == "apps"){
                $('.mdui-fab i').text("format_list_bulleted");
                $('.nexmoe-item').removeClass('thumb');
                $('.nexmoe-item .mdui-icon').css('display','inline-block');
                // $('.nexmoe-item .mdui-icon').show();
                $('.nexmoe-item .mdui-list-item').css("background","");
            }else{
                $('.mdui-fab i').text("apps");
                $('.nexmoe-item').addClass('thumb');
                $('.mdui-col-xs-12 i.mdui-icon').each(function(){
                    if($(this).text() == "image" || $(this).text() == "ondemand_video"){
                        var href = $(this).parent().parent().attr('href');
                        var thumb =(href.indexOf('?') == -1)?'?t=220':'&t=220';
                        $(this).hide();
                        $(this).parent().parent().parent().css("background","url("+href+thumb+")  no-repeat center top");
                    }
                });
            }

        }
        $(function(){

            //获取url中的参数
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return unescape(r[2]); return null; //返回参数值
            }
            //修改url中的参数
            function replaceParamVal(url, paramName,replaceWith) {
                var oUrl = url.toString();
                var re = eval('/('+ paramName+'=)([^&]*)/gi');
                var nUrl = oUrl.replace(re,paramName+'='+replaceWith);
                return nUrl;
            }

            $('.icon-sort').each(function (v,k) {
                var sort_table = $(this).attr("data-table");
                var sort_sort = $(this).attr("data-sort");
                if("{{sortTable}}" == sort_table){
                    // console.log(sort_sort)
                    if("{{sortType}}" == sort_sort){
                        $(this).attr("data-sort", "less").text("expand_" + "less");
                    }
                }
            });
            $('.icon-sort').on('click', function () {
                let sort_table = $(this).attr("data-table");
                let sort_sort = $(this).attr("data-sort");
                let sort_sort_to = (sort_sort == "more") ? "more" : "less";
                $(this).attr("data-sort", sort_sort_to).text("expand_" + sort_sort_to);
                let urlsortTable = getUrlParam("sortTable");
                if(urlsortTable){
                    reptable = replaceParamVal(window.location.search, "sortTable", sort_table);
                    repsort = replaceParamVal(reptable, "sortType", sort_sort);
                    window.location.href = "http://" + window.location.host + "/" + repsort;
                }else{
                    if(getUrlParam("drive")){
                        window.location.href = window.location.href + "&sortTable="+sort_table+"&sortType="+sort_sort
                    }else{
                        window.location.href = window.location.href + "/?drive={{ drive_id }}&sortTable="+sort_table+"&sortType="+sort_sort
                    }
                }
            });

            // 翻页
            $(".page-box .page-click").on('click', function () {
                let page = $(this).attr("data-page");
                let urlpage = getUrlParam("page");
                if(urlpage){
                    rep= replaceParamVal(window.location.search, "page", page);
                    window.location.href = "http://" + window.location.host + "/" + rep;
                }else{
                    if(getUrlParam("drive")){
                        window.location.href = window.location.href + "&page="+page
                    }else{
                        window.location.href = window.location.href + "/?drive={{ drive_id }}&page="+page
                    }
                }
            });

            // 弹出下载
            $(".down_file").on("click", function () {
                var drive = $(this).data("drive"),
                    disk = $(this).data("disk"),
                    id = $(this).data("id"),
                    name = $(this).data("name");
                var url = "/down_file/" + drive + "/" + disk + "/" + id + "/?=filename=" + name;
                layer.confirm('是否确认下载？', {
                    btn: ['确认','取消']
                }, function(index){
                    window.location.href = url;
                    layer.close(index);
                });
            });

            // 搜索按钮 - 未完成
            search = function () {
                var searchInput = $("#searchInput").val();
                let urlsearch = getUrlParam("search");
                if(searchInput) {
                    if(urlsearch){
                        searchurl = replaceParamVal(window.location.search, "search", searchInput);
                        window.location.href = "http://" + window.location.host + "/"+searchurl;
                    }else{
                        if(getUrlParam("drive")){
                            window.location.href = window.location.href + "&search="+searchInput
                        }else{
                            window.location.href = window.location.href + "/?drive={{ drive_id }}&search="+searchInput
                        }
                    }
                }else{
                    layer.msg("No Search!")
                }

            };



            /*
            *   循环获取图片真实地址
            *   By: yyyvy
            *   Time: 2019-03-18
            * */
            $('.lightboxurl').each(function(){
                var _this = $(this);
                $.when(geturl(_this)).done(function (data) {
                    _this.attr("href", data["url"]);
                });
            });
            function geturl(obj){
                var defer = $.Deferred();
                $.ajax({
                    url : $(obj).attr("href"),
                    dataType: 'json',
                    success: function(data){
                        defer.resolve(data)
                    }
                });
                return defer.promise();
            }

        });

        // 弹出视频
        layui.use(['layer'], function() {
            var $ = layui.$; //重点处
            $(".video_open").on("click", function () {
                var drive = $(this).data("drive"),
                    disk = $(this).data("disk"),
                    id = $(this).data("id");
                var url = "/pop_video/" + drive + "/" + disk + "/" + id;
                layer.open({
                    type: 2,
                    title: false,
                    area: ['50%', '60%'],
                    shade: 0.8,
                    // closeBtn: 0,
                    // shadeClose: true,
                    content: url
                });
            });
        });

    </script>
    <!-- 预留空间 给继承的script -->
    {% block script %}{% endblock %}

    <!-- 流量统计代码 -->
    {{ webconfig.web_site_statistics }}
</body>

</html>